<template>
	<view class="formdata">
		<view class="formdata-item">
			<view class="text">
				<text>班级名称</text>
			</view>
			<view class="input">
				<input placeholder="请输入班级名称" @input="OnClassName" />
			</view>
		</view>
	</view>
	<view class="AllClassImage">
		<view class="ClassImage" style=""  v-for="item in DAT" :key="item.CLASS_ID">
			<view class="ClassImage-title" @tap="handeshow(item.CLASS_ID)">
				<text>{{item.CLASSNAME}}-</text><text :style="item.STATE==1?'color:green':'color:red'">{{item.STATENR}}</text><text :class="item.hide?'cuIcon-right':'cuIcon-unfold'" ></text>
			</view>
			<view class="ClassImage-content" v-show="!item.hide">
				<image :src="item.WX_PIC" :alt="item.CLASSNAME" mode="widthFix" show-menu-by-longpress="true"></image>
				<view class="cu-bar btn-group margin-top">
				  <button class="cu-btn bg-blue shadow-blur" @tap="handleTo(item)">编辑</button>
				</view>
			</view>
		</view>
	</view>
	<view v-if="!DAT.length" class="text-sm text-center" style="margin-top: 20rpx;">-- 暂无数据 --</view>
	<view class="cu-form-group" v-if="COUNT>1">
		<view class="title" @tap="firstPage()"><text class="check-info-btn">首页</text></view>
		<view class="title" @tap="lastPage()"><text class="check-info-btn">上一页</text></view>
		<view class="title">{{Page}}/{{COUNT}}</view>
		<view class="title" @tap="nextPage()"><text class="check-info-btn">下一页</text></view>
	 <view class="title" @tap="endPage()"><text class="check-info-btn">尾页</text></view>
	</view>
</template>


<script lang="ts" setup>
import {onShow} from "@dcloudio/uni-app";
import {onMounted,ref} from "vue"
import {useClassImageList} from "./useSelectClassImage"
const {initClassImageList,DAT,COUNT} = useClassImageList()
let ClassName = ref < any > ("")
let Page = ref < any > ("1")
	function handleTo(data){
		uni.navigateTo({
			url: `/pages/More/moretap/ClassImageEdit?DATA=` + encodeURIComponent(JSON.stringify(data))
		})
	}
	function onSelectStatus(){
		
	}
	function firstPage() {
		Page.value = "1"
		initClassImageList({
			ClassName: ClassName.value,
			Page: Page.value,
			PageSize:"10"
		})
	}

	function lastPage() {
		if (Page.value > 1) {
			Page.value--
			initClassImageList({
				ClassName: ClassName.value,
				Page: Page.value,
				PageSize:"10"
			})
		}
	}

	function nextPage() {
		if (Page.value < COUNT.value) {
			Page.value++
			initClassImageList({
				ClassName: ClassName.value,
				Page: Page.value,
				PageSize:"10"
			})
		}
	}

	function endPage() {
		Page.value = COUNT.value
		initClassImageList({
			ClassName: ClassName.value,
			Page: COUNT.value,
			PageSize:"10"
		})
	}
function OnClassName(e: any) {
		ClassName.value = e.detail.value
		Page.value = "1"
		initClassImageList({
			ClassName: ClassName.value,
			Page:Page.value,
			PageSize:"10"
		})
	}
function handeshow(id:number){
	for(let i = 0;i<DAT.value.length;i++){
		if(DAT.value[i].CLASS_ID === id){ 
			DAT.value[i].hide = !DAT.value[i].hide
		}
	}
}
onShow(()=>{
	initClassImageList({
		ClassName:"",
		Page:"1",
		PageSize:"10"
	})
})
</script>

<style lang="scss">
	button{
		background-color: #0081FF;
		color: white;
	}
	.AllClassImage{
		.ClassImage{
			width: 700rpx;
			background-color: white;
			border-radius: 5rpx;
			margin-left: 25rpx;
			margin-top: 20rpx;
			box-shadow: #585850 10rpx 10rpx 10rpx;
			.ClassImage-title{
				height: 100rpx;
				width: 700rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.ClassImage-content{
				width: 100%;
			}
		}
	}
	.formdata {
		background-color: white;
		.formdata-item {
			padding: 0 32rpx 0 32rpx;
			border-bottom: 4rpx #F7F8FC solid;
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
	
			.text {
				margin-right: 32rpx;
			}
		}
	}
	.cu-form-group{
		margin-top: 20rpx;
	}
</style>